import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:travel/utils/colors.dart';
import 'package:travel/utils/styles.dart';
import 'package:travel/utils/tools.dart';
import 'package:travel/screen/flutter_screenutil.dart';

class AdmissionUnsubscribeController extends GetxController {
  RxInt count = 2.obs;

  RxInt insure = 2.obs;

  RxInt index = 0.obs;

  List<String> reason = [
    '需要改出行日期',
    '信息填错重新买',
    '证件未带/带错',
    '景区关闭',
    '商家主动联系要求退订',
    '未收到入园凭证',
    '取票不方便',
    '计划有变不去了',
    '其他原因'
  ];
}

class AdmissionUnsubscribeView extends GetView<AdmissionUnsubscribeController> {
  const AdmissionUnsubscribeView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF7f7),
      appBar: AppBar(
        automaticallyImplyLeading: true,
        backgroundColor: Colors.white,
        leading: InkWell(
          onTap: Get.back,
          child: Icon(
            Icons.arrow_back_ios,
            color: ColorsUtils.parseColorFromHexString(ColorsUtils.color3333),
            size: 20.w,
          ),
        ),
        leadingWidth: 40.w,
        title: Text(
          '申请退订',
          style: StylesUtils.customTextStyle(fontSize: 18.sp, color: ColorsUtils.color0000),
        ),
        actions: [
          Container(
            constraints: BoxConstraints.expand(width: 40.w),
          )
        ],
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Center(
              child: SizedBox(
                width: 345,
                child: Column(
                  children: [
                    Container(
                      margin: EdgeInsets.only(top: 10.h),
                      height: 100,
                      decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(8.w),
                          boxShadow: [
                            BoxShadow(
                                offset: Offset.zero,
                                blurRadius: 5.0,
                                spreadRadius: 0.0,
                                blurStyle: BlurStyle.inner,
                                color: ColorsUtils.rgba(0, 0, 0, 0.0980392156862745))
                          ]),
                      padding: const EdgeInsets.only(left: 15, top: 20, bottom: 20),
                      child: Column(
                        children: [
                          Container(
                            alignment: Alignment.centerLeft,
                            child: Text(
                              '故宫博物馆学生票',
                              style: StylesUtils.customTextStyle(
                                  color: ColorsUtils.color3333, fontSize: 17.sp),
                            ),
                          ),
                          Container(
                            height: 18,
                          ),
                          Container(
                            alignment: Alignment.centerLeft,
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Text(
                                  '商品份数',
                                  style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.color6666, fontSize: 15.sp),
                                ),
                                Expanded(
                                    child: Wrap(
                                  spacing: 10,
                                  alignment: WrapAlignment.end,
                                  crossAxisAlignment: WrapCrossAlignment.center,
                                  children: [
                                    Text(
                                      '最多可退',
                                      style: StylesUtils.customTextStyle(
                                          fontSize: 12.sp, color: ColorsUtils.colorFf99),
                                    ),
                                    InkWell(
                                      onTap: () {
                                        if (controller.count.value > 1) {
                                          controller.count--;
                                        }
                                      },
                                      child: SizedBox(
                                        width: 22,
                                        height: 22,
                                        child: CustomPaint(
                                          painter: _CircularCustomPainter(),
                                          child: Center(
                                            child: Text(
                                              '━',
                                              style: StylesUtils.customTextStyle(
                                                  color: ColorsUtils.color6799, fontSize: 13.sp),
                                            ),
                                          ),
                                        ),
                                      ),
                                    ),
                                    Obx(() => Text(
                                          '${controller.count.value}',
                                          style: StylesUtils.customTextStyle(
                                              fontSize: 16.sp, color: ColorsUtils.color3333),
                                        )),
                                    SizedBox(
                                      width: 22,
                                      height: 22,
                                      child: CustomPaint(
                                        painter: _CircularCustomPainter(
                                            color: ColorsUtils.parseColorFromHexString(
                                                ColorsUtils.colorCccc)),
                                        child: Center(
                                          child: Text(
                                            '✚',
                                            style: StylesUtils.customTextStyle(
                                                color: ColorsUtils.colorCccc, fontSize: 13.sp),
                                          ),
                                        ),
                                      ),
                                    )
                                  ],
                                ))
                              ],
                            ),
                          )
                        ],
                      ),
                    ),
                    Container(
                      margin: EdgeInsets.only(top: 10.h),
                      height: 100,
                      decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(8.w),
                          boxShadow: [
                            BoxShadow(
                                offset: Offset.zero,
                                blurRadius: 5.0,
                                spreadRadius: 0.0,
                                blurStyle: BlurStyle.inner,
                                color: ColorsUtils.rgba(0, 0, 0, 0.0980392156862745))
                          ]),
                      padding: const EdgeInsets.only(left: 15, top: 20, bottom: 20),
                      child: Column(
                        children: [
                          Container(
                            alignment: Alignment.centerLeft,
                            child: Text(
                              '景区意外险（含新冠保障）',
                              style: StylesUtils.customTextStyle(
                                  color: ColorsUtils.color3333, fontSize: 17.sp),
                            ),
                          ),
                          Container(
                            height: 18,
                          ),
                          Container(
                            alignment: Alignment.centerLeft,
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Text(
                                  '商品份数',
                                  style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.color6666, fontSize: 15.sp),
                                ),
                                Expanded(
                                    child: Wrap(
                                  spacing: 10,
                                  alignment: WrapAlignment.end,
                                  crossAxisAlignment: WrapCrossAlignment.center,
                                  children: [
                                    Text(
                                      '最多可退',
                                      style: StylesUtils.customTextStyle(
                                          fontSize: 12.sp, color: ColorsUtils.colorFf99),
                                    ),
                                    InkWell(
                                      onTap: () {
                                        if (controller.insure.value > 1) {
                                          controller.insure--;
                                        }
                                      },
                                      child: SizedBox(
                                        width: 22,
                                        height: 22,
                                        child: CustomPaint(
                                          painter: _CircularCustomPainter(),
                                          child: Center(
                                            child: Text(
                                              '━',
                                              style: StylesUtils.customTextStyle(
                                                  color: ColorsUtils.color6799, fontSize: 13.sp),
                                            ),
                                          ),
                                        ),
                                      ),
                                    ),
                                    Obx(() => Text(
                                          '${controller.insure.value}',
                                          style: StylesUtils.customTextStyle(
                                              fontSize: 16.sp, color: ColorsUtils.color3333),
                                        )),
                                    SizedBox(
                                      width: 22,
                                      height: 22,
                                      child: CustomPaint(
                                        painter: _CircularCustomPainter(
                                            color: ColorsUtils.parseColorFromHexString(
                                                ColorsUtils.colorCccc)),
                                        child: Center(
                                          child: Text(
                                            '✚',
                                            style: StylesUtils.customTextStyle(
                                                color: ColorsUtils.colorCccc, fontSize: 13.sp),
                                          ),
                                        ),
                                      ),
                                    )
                                  ],
                                ))
                              ],
                            ),
                          )
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(top: 10.h),
              padding: EdgeInsets.symmetric(vertical: 10.h, horizontal: 15.w),
              decoration: const BoxDecoration(color: Colors.white),
              alignment: Alignment.centerLeft,
              child: Column(
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      RichText(
                          text: TextSpan(
                              text: '预估可退金额 ',
                              style: StylesUtils.customTextStyle(
                                  color: ColorsUtils.color3333, fontSize: 16.sp),
                              children: [
                            TextSpan(
                                text: '￥',
                                style: StylesUtils.customTextStyle(
                                    color: ColorsUtils.colorD900, fontSize: 16.sp)),
                            TextSpan(
                                text: '60',
                                style: StylesUtils.customTextStyle(
                                    color: ColorsUtils.colorD900, fontSize: 18.sp))
                          ])),
                      RichText(
                          text: TextSpan(
                              text: '明细 ',
                              style: StylesUtils.customTextStyle(
                                  color: ColorsUtils.color6799, fontSize: 13.sp),
                              children: [
                                WidgetSpan(
                                    child: Icon(
                                      Icons.arrow_forward_ios,
                                      size: 12.sp,
                                      color: ColorsUtils.parseColorFromHexString(
                                          ColorsUtils.colorCccc),
                                    ),
                                    alignment: PlaceholderAlignment.middle)
                              ],
                              recognizer: TapGestureRecognizer()..onTap = () {}))
                    ],
                  ),
                  Container(
                    margin: EdgeInsets.only(top: 10.h),
                    alignment: Alignment.centerLeft,
                    child: Text(
                      '门票与意外险退订数量必须一致',
                      style: StylesUtils.customTextStyle(
                          fontSize: 12.sp, color: ColorsUtils.color9999),
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.only(top: 4.h),
                    alignment: Alignment.centerLeft,
                    child: Text(
                      '退款预计1-7个工作日退回您的支付账户',
                      style: StylesUtils.customTextStyle(
                          fontSize: 12.sp, color: ColorsUtils.color9999),
                    ),
                  ),
                ],
              ),
            ),
            Container(
              margin: EdgeInsets.only(top: 10.h),
              padding: EdgeInsets.symmetric(horizontal: 15.w),
              decoration: const BoxDecoration(color: Colors.white),
              alignment: Alignment.centerLeft,
              child: Column(
                children: [
                  Container(
                    height: 45.h,
                    alignment: Alignment.centerLeft,
                    child: Text(
                      '请选择退订原因（必填）',
                      style: StylesUtils.customTextStyle(
                          color: ColorsUtils.color9999, fontSize: 15.sp),
                    ),
                  ),
                  ...controller.reason
                      .asMap()
                      .map((i, e) => MapEntry(
                          i,
                          Container(
                            height: 45.h,
                            alignment: Alignment.centerLeft,
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Text(
                                  e,
                                  style: StylesUtils.customTextStyle(
                                      fontSize: 15.sp, color: ColorsUtils.color0000),
                                ),
                                Obx(() => IconButton(
                                    padding: EdgeInsets.zero,
                                    onPressed: () {
                                      if (controller.index.value != i) {
                                        controller.index.value = i;
                                      }
                                    },
                                    icon: ToolsUtils.assetImageSvg(
                                        i == controller.index.value ? 'u3383.svg' : 'u3375.svg',
                                        width: 22.w,
                                        height: 22.h)))
                              ],
                            ),
                          )))
                      .values
                      .toList()
                ],
              ),
            )
          ],
        ),
      ),
      bottomNavigationBar: SafeArea(
        bottom: true,
        child: Container(
          height: 60,
          alignment: Alignment.center,
          child: FractionallySizedBox(
            heightFactor: 0.8,
            widthFactor: 0.85,
            child: Container(
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(8.w),
                  color: ColorsUtils.rgba(226, 57, 64, 1)),
              alignment: Alignment.center,
              child: TextButton(
                  onPressed: () {},
                  style: const ButtonStyle(
                    padding: MaterialStatePropertyAll(EdgeInsets.symmetric(horizontal: 50, vertical: 10)),
                    overlayColor: MaterialStatePropertyAll(Colors.pink)
                  ),
                  child: Text(
                    '申请退订',
                    style: StylesUtils.customTextStyle(fontSize: 16.sp),
                  )),
            ),
          ),
        ),
      ),
    );
  }
}

class _CircularCustomPainter extends CustomPainter {
  final Color? color;

  _CircularCustomPainter({this.color});

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = color ?? ColorsUtils.parseColorFromHexString(ColorsUtils.color6799)
      ..strokeWidth = 1
      ..style = PaintingStyle.stroke;
    canvas.drawCircle(Offset(size.width / 2, size.height / 2), size.height / 2, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return this != oldDelegate;
  }
}
